<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="考场名称" prop="examRoomName">
            <el-input v-model="form.examRoomName" placeholder="请输入考场名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考场地址" prop="examRoomSite">
            <el-input v-model="form.examRoomSite" placeholder="请输入考场地址"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="座位总数" prop="seatCount">
            <el-input-number v-model="form.seatCount" style="width: 100%" controls-position="right" :min="0" :max="500" placeholder="请输入座位总数"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="float: right;" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" size="mini" @click="submitForm">保 存</el-button>
      <el-button size="mini" @click="cancelDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {getExamRoomListById,updateExamRoom,addExamRoom} from "@/api/exam/examRoom"
  export default {
    name: "examRoomForm",
    data(){
      return {
        //遮罩层
        buttonLoading: false,
        form: {},
        rules: {
          examRoomName: [
            { required: true, message: "考场名称不能为空", trigger: "blur"}
          ],
          examRoomSite: [
            { required: true, message: "考场地址不能为空", trigger: "blur"}
          ],
          seatCount: [
            { required: true, message: "座位总数不能为空", trigger: "change"}
          ],
        }
      }
    },
    methods: {
      init(id){
        getExamRoomListById(id).then(response => {
          this.form = response.responseBody;
        })
      },
      //新增
      submitForm(){
        this.$refs["form"].validate(valid => {
          if(valid){
            this.buttonLoading = true;
            if(this.form.examRoomId != undefined){
              updateExamRoom(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                }
                // this.msgSuccess("修改成功");
                this.$emit("submitForm");
                this.$emit("cancelDialog");
              }).finally(() => {
                this.buttonLoading = false
              })
            }else {
              addExamRoom(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                }
                // this.msgSuccess("新增成功");
                this.$emit("submitForm");
                this.$emit("cancelDialog");
              }).finally(() => {
                this.buttonLoading = false
              })
            }
          }
        });
      },
      cancelDialog(){
        this.$emit("cancelDialog");
      }
    }
  }
</script>

<style scoped>

</style>
